<template>
	<view class="index_content_basic">
		<view class="index_content_basic_main">
			<u--form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="100px"
				class="demo-ruleForm">
				<u-form-item label="项目名称" prop="projectName">
					<u-input v-model="ruleForm.projectName" placeholder="请输入项目名称"></u-input>
				</u-form-item>
				<u-form-item label="项目起止时间" prop="">
					<view class="flex aic jcsb" >
						<u-form-item prop="experienceStartTime" >
							<view class="" style="width: 120px;">
								<TimeSelect :placeholders="'开始时间'" :value="ruleForm.experienceStartTime" :keys="'experienceStartTime'" @mySelectclick="mySelectclick"></TimeSelect>
							</view>
						</u-form-item>
						<text style="margin: 0px 5px 0px 5px;">-</text>
						<u-form-item prop="experienceEndTime"  v-if="ruleForm.experienceEndTime">
							<view class="" style="width: 120px;">
								<TimeSelect :placeholders="'结束时间'" :value="ruleForm.experienceEndTime"
									:keys="'experienceEndTime'" @mySelectclick="mySelectclick"></TimeSelect>
							</view>
						</u-form-item>
						<u-form-item prop=""  v-else>
							<view class="" style="width: 120px;">
								<u-input :disabled="true" placeholder="至今"></u-input>
							</view>
						</u-form-item>
						<view class="" style="width: 100px;margin-left: 20px;">	
							<u-checkbox-group @change="checkboxChange">
								<u-checkbox label="至今" :checked="checked" value="至今" :name="getNowTime(true)"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="担任职位" prop="positionName">
					<u-input v-model="ruleForm.positionName" placeholder="请输入担任职位"></u-input>
				</u-form-item>
				<u-form-item label="项目描述" prop="projectDescription">
				   <u-textarea type="textarea" v-model="ruleForm.projectDescription" rows="4" placeholder="请输入项目描述"></u-textarea>
				 </u-form-item>
			</u--form>
		</view>
		<view class="position_footer flex aic jcsb">
			<u-button class="blue_btn" style="width: 100%;" type="primary" @click="submitForm('ruleForm')">保存
			</u-button>
			<view class="" style="width: 44%;margin-left: 16px;" v-if="type == 0">
				<u-button class="" type="error" @click="deleteFun()" >
					删除
				</u-button>
			</view>
		</view>
		<!-- 开始时间 -->
		<u-datetime-picker @cancel="startshow=false" :show="startshow" @confirm="startConfirm"
			 mode="date"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker @cancel="endshow=false" :show="endshow" @confirm="endConfirm"
			 mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		editResume
	} from "@/api/my.js"
	import TimeSelect from "../../../components/TimeSelectMonth.vue"
	export default {
		components: {
			TimeSelect
		},
		data() {
			var validateTime = (rule, value, callback) => {
				if (!this.ruleForm.experienceStartTime) {
					callback(new Error("请选择开始时间！"))
				} else if (Date.parse(this.ruleForm.experienceStartTime) >= Date.parse(value)) {
					callback(new Error("结束时间必须大于开始时间！"))
				} else {
					callback();
				}
			};
			return {
				checked: true,
				startshow: false,
				endshow: false,
				ruleForm: {
					projectName:"",
					experienceStartTime:"",
					experienceEndTime:null,
					positionName:"",
					projectDescription:"",
				},
				rules: {
					projectName: [{
						required: true,
						message: '请输入项目名称',
						trigger: 'blur'
					}],
					experienceStartTime: [{
						required: true,
						message: '请输入开始时间',
						trigger: 'blur'
					}],
					experienceEndTime: [{
						required: true,
						message: '请输入结束时间',
						trigger: 'blur'
					}, {
						validator: validateTime,
						trigger: ['blur', 'change']
					}, ],
					positionName: [{
						required: true,
						message: '请输入担任职位',
						trigger: 'blur'
					}],
				
					projectDescription: [{
						required: true,
						message: '请输入项目描述',
						trigger: 'blur'
					}],
				
				},
				indexValue: "",
				type: 0
			};
		},
		onLoad(options) {
			this.datas = JSON.parse(options.data)
			this.type = options.type
			if (options.type == 0) { //修改
				this.indexValue = options.index
				this.info(this.datas, options.index)
			} else { //新增	
			}
		
		},
		onReady() {
			this.$refs.ruleForm.setRules(this.rules);
		},
		methods: {
			checkboxChange(n) {
				console.log('change', n, this.ruleForm.experienceEndTime);
				if (this.ruleForm.experienceEndTime == null) {
					if (n.length != 0) {
						let string = n[0]
						this.ruleForm.experienceEndTime = string
					}else{
						this.ruleForm.experienceEndTime = this.getNowTime((true))
					}
				} else {
					this.ruleForm.experienceEndTime = null
				}
			
			},
			getNowTime(isAll) {
				let now = new Date();
				let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
				let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let today = now.getDate(); //获取当前日(1-31)
				let hour = now.getHours(); //获取当前小时数(0-23)
				let minute = now.getMinutes(); //获取当前分钟数(0-59)
				let second = now.getSeconds(); //获取当前秒数(0-59)
				let nowTime = ''
				//返回年月日时分秒
				if (isAll) {
					nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) +
						':' + this.fillZero(minute) + ':' + this.fillZero(second)
				} else { //返回年月日
					nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today)
				}
				return nowTime
			},
			fillZero(str) {
				var realNum;
				if (str < 10) {
					realNum = '0' + str;
				} else {
					realNum = str;
				}
				return realNum;
			},
			mySelectclick(e) {
				console.log("下拉框组件回传:", e);
				this.ruleForm[e.key] = e.value
			},
			info(data, index) {
				console.log("data:", data);
				this.ruleForm = data.projectExperiences[index]
				if(!this.ruleForm.experienceEndTime){
					this.checked=true
				}else{
					this.checked=false
				}
				// this.ruleForm.experienceStartTime=this.ruleForm.experienceStartTime.slice(0,11)
				// this.ruleForm.experienceEndTime=this.ruleForm.experienceEndTime.slice(0,11)
			},
			deleteFun(){
				let obj = this.datas
				obj.projectExperiences.splice(this.indexValue,1)
				editResume(obj).then(res => {
					uni.showToast({
						title: "已删除",
						icon: 'error'
					})
					if (this.type == 1) {
						uni.navigateBack("-1")
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				})
			},
			submitForm(formName) {
				this.$refs.ruleForm.validate().then(valid => {
					if (valid) {
						let obj = this.datas
						console.log("项目经历数据：",obj);
						// this.ruleForm.experienceStartTime=this.ruleForm.experienceStartTime.length>11?this.ruleForm.experienceStartTime:this.ruleForm.experienceStartTime+" 00:00:00"
						// this.ruleForm.experienceEndTime=this.ruleForm.experienceEndTime.length>11?this.ruleForm.experienceEndTime:this.ruleForm.experienceEndTime+" 00:00:00"
						if (this.type == 0) {
							obj.projectExperiences[this.indexValue] = this.ruleForm
						} else {
							obj.projectExperiences.push(this.ruleForm)
						}
			
						editResume(obj).then(res => {
							uni.showToast({
								title: "保存成功",
								icon: 'success'
							})
							if (this.type == 1) {
								uni.navigateBack("-1")
							}
						}).catch(res => {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						})
					} else {
						this.$message({
							message: '请完善信息',
							type: 'error',
							offset: 0.1
						});
						console.log('error submit!!');
						return false;
					}
				});
			},
			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				// var date = new Date(timestamp * 1000);
				var date = new Date(timestamp);
				let Y = date.getFullYear() + "-"; //年
				let M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-"; // 月
				let D =
					(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; //日
				let h =
					(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"; //时
				let m =
					(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
					":"; //分
				let s =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
				return Y + M + D;
			},
			startConfirm(e) {
				console.log(e);
				this.ruleForm.experienceStartTime = this.timestampToTime(e.value)
				console.log(this.ruleForm.experienceStartTime);
				this.startshow = false
			},
			endConfirm(e) {
				this.ruleForm.experienceEndTime = this.timestampToTime(e.value)
				console.log(e);
				this.endshow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.blue_btn {
		height: 40px;
		background: #2F6CBC;
		border: 1px solid #2F6CBC;
	}
</style>

